<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue-2.6.12开发.js"></script>
</head>

<body>
    <!-- 
        监视属性 watch :
            1.当被监视的属性变化时,回调函数自动调用 进行相关操作
            2.监视属性(函数)必须存在 才能进行监视!!
            3.监视的两种写法:
                (1).new Vue时传入watch配置
                (2).通过vm.$watch(被监视的'属性'或函数)
            4.两种写法的使用时机:
                (1).当使用Vue传入配置项时就确认了监视属性 则使用1
                (2).一开始不确认监视属性 后期再加 则使用2    
     -->
    <div id="root">
        <h1>今天天气很{{info}}</h1>
        <!-- 绑定事件= 可以写一些简单的js语句  但不推荐-->
        <!-- <button @click="isHoat =!isHoat">点我</button> -->
        <button @click="change">点我</button>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                isHoat: true
            },
            computed: {
                // info: {
                //     get() {
                //         return this.isHoat ? '炎热' : '凉爽'
                //     }, 
                //     // set(value) { 
                //     // }
                // }
                // 不涉及修改时计算属性可简写
                info() {
                    return this.isHoat ? '炎热' : '凉爽'
                }

            },
            // methods用于装普通函数的盒子
            methods: {
                change() {
                    this.isHoat = !this.isHoat
                }

            },

            // 监视属性 watch 
            // 写在Vue配置项中为第一种写法: 
            // watch: {
            //     isHoat: {
            //         immediate:true,//初始化时让handler被调用一下
            //         handler(newValue, oldValue) {//被监视的属性发生变化 则handler函数自动调用
            //                                      //newValue, oldValue默认undefined 
            //             console.log('ishoat被修改了',newValue, oldValue);
            //         }
            //     }
            // }
        })
        // 监视属性 watch 
        // 写在Vue配置项外为第二种写法: vm.$watch('isHoat',{配置项}) 看来通过vm调用这些Vue内置api都得需要$符
        vm.$watch('isHoat', {
            immediate: true,//初始化时让handler被调用一下
            handler(newValue, oldValue) {//被监视的属性发生变化 则handler函数自动调用
                //newValue, oldValue默认undefined 
                console.log('ishoat被修改了', newValue, oldValue);
            }
        })

    </script>
</body>

</html>